<script setup lang="ts">
import CustomNavbar from './components/CustomNavbar.vue';
import CategoryPanel from './components/CategoryPanel.vue';
import HotPanel from './components/HotPanel.vue';
import { getHomeBannerAPI, getHomeHotAPI } from '@/apis/home'
import { onLoad } from '@dcloudio/uni-app'
import type { BannerItem, HotItem } from '@/types/home'
import { ref } from 'vue'
import type { CategoryItem } from '@/types/home';
import { getHomeCategoryAPI } from '@/apis/home'
import type { XtxGuessInstance } from '@/types/components'
import Skeleton from './components/Skeleton.vue'
// 保存轮播图数据
const bannerList = ref<BannerItem[]>([])
const categoryItemList = ref<CategoryItem[]>([])
const getHomeList = ref<HotItem[]>([])
const guessRef = ref<XtxGuessInstance>()
// 获取首页的轮播图数据
const getHomeBanner = async () => {
  const res = await getHomeBannerAPI()
  // console.log(res.result, 141414)
  bannerList.value = res.result
  // console.log(bannerList)
}

const getHomeCategory = async () => {
  const res = await getHomeCategoryAPI()
  // console.log(res)
  categoryItemList.value = res.result
}

const getHomeHot = async () => {
  const res = await getHomeHotAPI()
  // console.log(res)
  getHomeList.value = res.result

}
const onScrolltolower = () => {
  guessRef.value?.getMore()
}
const isLoading = ref(false)
onLoad(() => {
  isLoading.value = true
  Promise.all([getHomeBanner(), getHomeCategory(), getHomeHot()])
  isLoading.value = false
  // getHomeBanner()
  // getHomeCategory()
  // getHomeHot()
})

// import type { XtxGuessType } from '@/types/components'
// // 给添加类型标准
// const xtxguessRef = ref<XtxGuessType>()
// // 滚动到底部，会触发 scrolltolower 事件
// // 触发 XtxGuess 组件里面的获取数据的方法 父组件需要调用子组件里面的方法  Vue3的语法
// const onScrolltolower = () => {
//   // console.log('触底了....')
//   // 调用了 XtxGuess 组件里面 获取数据的方法
//   xtxguessRef.value?.getMore()
// }
import { useGuseeList } from '@/composables'
const { onScrolltolower, guessRef: xtxguessRef } = useGuseeList()

// 下拉刷新状态
const isTriggered = ref(false)
// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
  // 开启动画
  isTriggered.value = true
  // 重置猜你喜欢组件数据
  guessRef.value?.resetData() // 加载数据
  await Promise.all([getHomeBanner(), getHomeCategory(), getHomeHot()]) // 关闭动画
  isTriggered.value = false
}
</script>

<template>
  <CustomNavbar></CustomNavbar>
  <scroll-view class="scrollview" scroll-y @scrolltolower="onScrolltolower" refresher-enabled
    @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
    <!-- 引入 骨架屏组件 -->
    <HomeSkeleton v-if="isTriggered" />
    <template v-else>
      <!-- 轮播图组件 -->
      <XtxSwiper :list="bannerList" />
      <!-- 首页分类 -->
      <CategoryPanel :list="categoryItemList" />
      <!-- 热门推荐 -->
      <HotPanel :list="getHomeList" />
      <!-- 猜你喜欢 -->
      <XtxGuess ref="xtxguessRef" />
    </template>
  </scroll-view>
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  // 将主轴修改为 Y轴
  flex-direction: column;

  .scrollview {
    flex: 1;
    overflow: hidden;
  }
}
</style>
